import React, { Component } from 'react'
// 校验props类型第一步引入第三方包
import PropsType from 'prop-types'
export class son extends Component {
  // constructor(props) {
  //   super()
  //   this.state={
  //     name:'子组件',
  //     msg:'我是儿子',
  //     prop:{...props}
  //   }
  // }
  state={
        name:'子组件',
        msg:'我是儿子',
        parentMsg: this.props.msg
      }
      handlerChange = (e)=>{
        this.setState({parentMsg:e.target.value})
        this.props.parentChange(e.target.value)
      }
  render() {
    let {name ,msg,parentMsg} = this.state 
    // 这里可以直接取值，因为父子组件中的变量同名所以要用别名，也可以直接使用this.state.name 和this.props.name
    let {name:pName,msg:pMsg} = this.props
    return (
      <div>
        <h1>组件名：{name}</h1>
        <p>提示：{msg}</p>
        <h1>{parentMsg}</h1>
        <hr/>
        <p>接受的props数据</p>
          <h2>{pName}</h2>
          <h2>{pMsg}</h2>
        <hr/>
        <h2>通过子组件的输入框改变父组件中的值</h2>
        <input type="text" defaultValue={pMsg} onChange={this.handlerChange}/>
      </div>
    )
  }
}
// 第二步
// props校验类型  类型后面跟上.isRequired表示必传
son.propsTypes = {
  name:PropsType.string,
  msg:PropsType.number,
}
// props设置默认值
son.defultPorps={
  name:'默认名字',
  msg:'默认信息'
}
export default son